<template>
  <el-dialog title="洗车站详情" :visible.sync="info.show" width="800px" center>
    <div class="dialog-content">
      <div>
        站点名称：<span>{{ info.data.station_Name }}</span>
      </div>
      <div>
        所属商户号：<span>{{ info.data.merchant_Num }}</span>
      </div>
      <div>
        站点类型：
        <span
          v-if="
            info.data.accountStoreMerchantRelationList &&
              info.data.accountStoreMerchantRelationList.length
          "
          >{{
            info.data.merchant_Type == 10 ? "普通站点类型" : "合伙站点类型"
          }}</span
        >
      </div>
      <div>
        所属关系：
        <el-table
          :data="info.data.accountStoreMerchantRelationList"
          border
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="merchant_TypeName" label="合作类型">
          </el-table-column>
          <el-table-column prop="store_Name" label="所属代理商">
          </el-table-column>
          <el-table-column prop="truename" label="负责人"> </el-table-column>
          <el-table-column prop="mobile" label="联系电话"> </el-table-column>
          <el-table-column prop="mobile" label="推广码">
            <template slot-scope="scope">
              <div class="qrcode-wrap">
                <vue-qr
                  slot="reference"
                  :text="
                    qrcode.baseUrl +
                      '&siteId=' +
                      info.data.id +
                      '&storeId=' +
                      scope.row.store_id
                  "
                  :margin="0"
                  colorDark="#333"
                  colorLight="#fff"
                  :size="400"
                  :callback="
                    e => {
                      scope.row.imgUrl = e;
                    }
                  "
                ></vue-qr>
                <div
                  class="qrcode-d"
                  @click="downloadIamge(scope.row.imgUrl, '推广二维码')"
                >
                  下载
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        站点地址：<span>{{ info.data.address }}</span>
      </div>
      <div>
        站点运维：<span>{{ info.data.operations }}</span>
      </div>
      <div>
        站点场景：<span>{{ info.data.scenario }}</span>
      </div>
      <div>
        停车收费：<span>{{ info.data.park }}</span>
      </div>
      <div>
        营业时间：<span>{{ info.data.open_Time }}</span>
      </div>
      <div>
        缩略图：
        <el-image
          v-if="info.data.thumbnail_img"
          style="width: 50px; height: 50px"
          :src="info.data.thumbnail_img"
          :preview-src-list="[info.data.thumbnail_img]"
        >
        </el-image>
      </div>
      <div>
        创建时间：<span>{{ info.data.addTime | filterTime }}</span>
      </div>
      <div>
        更新时间：<span>{{ info.data.updateTime | filterTime }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import vueQr from "vue-qr";

export default {
  data() {
    return {
      // 推广二维码
      qrcode: {
        // 是否显示
        show: false,
        // 生成出来的图片地址
        imgUrl: "",
        // 携带的参数
        param: "",
        // 生成二维码的默认地址
        // isCarWashStationShare：是后台管理系统洗车站管理分享
        // siteId：站点id
        // storeId：店铺id
        baseUrl:
          "https://lineapi.yzsheng.com/carwash_globalche?isCarWashStationShare=true"
      }
    };
  },
  components: {
    vueQr
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    // 下载推广二维码
    downloadIamge(imgsrc, name) {
      let a = document.createElement("a"); // 生成一个a元素
      let event = new MouseEvent("click"); // 创建一个单击事件
      a.download = name || "推广二维码"; // 设置图片名称
      a.href = imgsrc; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    }
  }
};
</script>
<style lang="scss" scoped>
.qrcode-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 50px;
    height: 50px;
  }
  .qrcode-img {
    width: 50px;
    height: 50px;
  }
  .qrcode-d {
    margin-left: 10px;
    cursor: pointer;
  }
}
.dialog-content {
  line-height: 30px;
  .el-row {
  }
  .table-title {
    margin-top: 30px;
  }
}
</style>
